<!--
/**
* Author: linchun
* Date: 2022-08-01 20:40
* Desc: LocationBar 定位条组件
*/
-->
<template>
  <view class="location-bar">
    <view class="content flex-b-m" @click.stop="getAreaInfo">
      <view>
        <image
          class="icon-location-yellow"
          mode="scaleToFill"
          :src="getImag('icon-location-yellow')"
        ></image>
        <text class="name"> 当前:{{ locationTip }} </text>
      </view>
      <image
        class="icon-relocation-yellow"
        mode="scaleToFill"
        :src="getImag('icon-relocation-yellow')"
      ></image>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'LocationBar',
    data() {
      return {}
    },
    props: {
      info: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    created() {},
    computed: {
      locationTip() {
        return (
          this.$auth.getLoctionAreaInfo().addressDesc || '定位失败，点击刷新'
        )
      }
    },
    methods: {
      // 初始化方法
      init() {},
      toChoiceArea() {
        //跳转选择城市页面
        this.$tools.navigateTo('/subPages/choiceAreaPage/index')
      },
      getImag(src, suffix = 'png') {
        return this.$utils.getOssImg(src, suffix) || ''
      },
      getAreaInfo() {
        console.log(12121212)
        this.$auth.getAreaInfo(true)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .location-bar {
    position: relative;
    width: 100%;
    height: 78rpx;
    border-radius: 18rpx;
    // z-index: -1;
    background: rgba($color: #fffbe3, $alpha: 0.4);
    .content {
      color: #ffb415;
      height: 78rpx;
      font-size: 28rpx;
      z-index: 10;
    }
  }
  .icon-location-yellow {
    width: 26rpx;
    height: 27rpx;
    margin-left: 29rpx;
    margin-right: 15rpx;
  }
  .icon-relocation-yellow {
    width: 23rpx;
    height: 26rpx;
    margin-right: 30rpx;
    z-index: 3;
  }
</style>
